/** IT大屏主屏
 * Author:      yangjq
 * CreateTime:  2023/9/6 10:17:38
 * LastEditor:  yangjq
 * ModifyTime:  2023/12/5 20:36:25
 * Description:
*/
<template>
  <div class="containerx">
    <div style="height: 10%;widht:100%;">
      <!--      <dv-decoration-8 :color="primaryColor" class="header-left-decoration" />-->
      <!-- <dv-decoration-5 :color="primaryColor" class="" style="width: 100%" dur="5" /> -->
      <div style="width: 100%;height:80px;"><img style="width:100%;height:100%;margin-top:18px;" src="/svg/header-bk.svg"></div>
      <!-- <dv-decoration-8 style="width:500px;height:50px;float:left;" /> -->
      <!-- <dv-decoration-8 :color="primaryColor" class="header-right-decoration" :reverse="true" /> -->
      <div class="center-title" ref="middle">数据中心软硬件运行实时监测系统</div>
    </div>
    <div class="position-time">
      <span ref="bottom" style="margin-right: 20px;" class="led-cls gradient-text">{{ time }}</span>
      <FullScreenSetting />
      <Home />
    </div>
    <el-row style="background: transparent; height: 90%;padding-bottom:6px;">
      <el-col :span="6">
        <div style="height: 25%;" class="leftPanel">
          <dv-border-box-6 :color="primaryColor" dur="0" style="padding:4px;">
            <div class="part-bk-cls">
              <it-computed-panel/>
            </div>
          </dv-border-box-6>
        </div>
        <div style="height: 25%" class="leftPanel">
          <dv-border-box-6 :color="primaryColor" dur="0"  style="padding:4px;">
            <div class="part-bk-cls">
              <it-storage-panel />
            </div>
          </dv-border-box-6>
        </div>
        <div style="height: 25%" class="leftPanel">
          <dv-border-box-6 :color="primaryColor" dur="0"  style="padding:4px;">
            <div class="part-bk-cls">
              <it-business-panel />
            </div>
          </dv-border-box-6>
        </div>
        <div style="height: 25%" class="leftPanel">
          <dv-border-box-6 :color="primaryColor" dur="3" style="padding:4px;">
            <div class="part-bk-cls">
              <it-network />
            </div>
          </dv-border-box-6>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 78%">
          <it-machine-room-fix :width="'100%'" :height="'100%'" :roomIndex="curRoomIndex" @change="machineRoomAutoChange"/>
        </div>
        <div class="monitor-header-cls"><span>{{ROOM_NAMES[curRoomIndex]}}&nbsp;·&nbsp;运行监测</span></div>
        <div style="height: 16%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center">
          <it-header-panel :roomIndex="curRoomIndex"/>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="height: 40%" class="rightPanel">
          <dv-border-box-6 style="height: 100%;padding:4px;"  :color="primaryColor" dur="0">
            <div class="part-bk-cls">
              <it-fresh-air-panel :roomIndex="curRoomIndex" style="height: 48%;"/>
              <ItTempDumidity :roomIndex="curRoomIndex" :width="'100%'" :height="'50%'" />
            </div>
          </dv-border-box-6>
        </div>
        <div style="height: 60%" class="rightPanel">
          <dv-border-box-6 style="height: 100%;padding:4px;"  :color="primaryColor" dur="0">
            <div class="part-bk-cls">
              <it-vchart :roomIndex="curRoomIndex" :width="'100%'" :height="'100%'"/>
            </div>
          </dv-border-box-6>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" scoped>
  import FullScreenSetting from '/@/components/AI/FullScreenSetting.vue';
  import Home from '/@/components/AI/Home.vue';
  import { ref,onMounted,computed } from 'vue';
  import { formatToDateTimeAndWeek } from '/@/utils/dateUtil';
  import ItNetwork from '/@/views/admin/screen/it/ItNetwork.vue';
  import ItTempDumidity from './ItTempDumidity.vue';
  import ItMachineRoomFix from '/@/views/admin/screen/it/ItMachineRoomFix.vue';
  import ItVchart from '/@/views/admin/screen/it/itVchart.vue';
  import ItComputedPanel from '/@/views/admin/screen/it/itComputedPanel.vue';
  import ItStoragePanel from '/@/views/admin/screen/it/itStoragePanel.vue';
  import ItBusinessPanel from '/@/views/admin/screen/it/itBusinessPanel.vue';
  import ItFreshAirPanel from '/@/views/admin/screen/it/itFreshAirPanel.vue';
  import ItHeaderPanel from '/@/views/admin/screen/it/itHeaderPanel.vue';


  const primaryColor = ['#15B3F7', '#5D8FFB'];
  const curRoomIndex = ref(0);
  const time = ref('yyyy-MM-dd hh:mm:ss');
  const ROOM_NAMES = ['数据机房', '网络机房', 'UPS间'];
  const machineRoomAutoChange = (value)=>{
    console.log('回调事件'+ value);
    curRoomIndex.value = value;
  };
  setInterval((_) => {
      time.value = formatToDateTimeAndWeek();
    }, 1000);
  onMounted(()=>{

  });
  const getWidth=computed(function(){
   return  document.body.clientWidth;
  })
</script>

<style scoped lang="less">
  .containerx {
    background: url('/admin/bg.png');
    background-size: cover;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    padding: 2px 2px 10px 2px;
  }

  .leftPanel {
    padding: 2px 2px 2px 2px;
  }

  .rightPanel {
    padding: 2px 2px 2px 2px;
  }

  .header-center-decoration {
    width: 60%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration,
  .header-right-decoration {
    width: 20%;
    height: 60px;
    color: #0415ff;
  }

  .center-title {
    position: absolute;
    font-size: 40px;
    font-weight: bold;
    color: white;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .position-time {
    z-index: 200;
    position: absolute;
    right: 20px;
    top: 5.4vh;
    font-size: 20px;
    color: white;
  }
  .part-bk-cls{
    height: 100%;
    width: 100%;
    border-radius: 5px;
    padding: 2px;
    background: linear-gradient(90deg, rgba(0, 60, 153, 0.2) 0%, rgba(85, 149, 245, 0.1) 48.8525390625%, rgba(0, 60, 153, 0.2) 100%);
    &:hover {
      background : linear-gradient(90deg, rgba(0, 60, 153, 0.6) 0%, rgba(85, 149, 245, 0.1) 48.8525390625%, rgba(0, 60, 153, 0.6) 100%);
    }
  }

  :deep(.el-carousel__container) {
    height: 100% !important;
  }

  :deep(.el-progress-bar__inner){
    text-align: center;
  }

  :deep(.el-progress-bar__innerText){
    font-size: 16px;
  }

  .led-cls {
    font-family: 'electronicFont';
    font-size: 1.6rem;
    font-weight: bold;
  }


  .gradient-text {
    background: linear-gradient(to right, #f30404, #fab802fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .monitor-header-cls {
    text-align:center;
    border-radius: 5px;
    padding: 4px 0px 2px 0px;
    background: rgba(0, 60, 153, 0.08);
    color:white;
    border-color: #01aaff;
    font-size: 1.4rem;
    font-weight: bold;
  }
</style>
